<template>
  <view class="search-container">
    <van-search
      v-model="value"
      :value="value"
      placeholder="请输入搜索关键词"
      :show-action="isShow"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
    />
    <view class="search-body">
      <view class="empty" v-if="courseList.length===0">
        <text class="title">暂无内容哦~</text>
      </view>

      <course-list :courseList="courseList"></course-list>
    </view>
  </view>
</template>
<script>
import request from "@/utils/request";
import courseList from "@/components/course-list.vue";
export default {
  data() {
    return {
      value: "",
      isShow: false,
      courseList: [],
    };
  },
  methods: {
    async onSearch(e) {
      const res = await request({
        url: "course/search",
        data: { name: e.detail },
      });
      console.log(res);
      if (res.data.status === 0) {
        this.courseList = res.data.message;
      }
    },
    async onCancel() {
      this.isShow = false;
      this.value = "";
      const res = await request({
        url: "course/search",
        data: { name: this.value },
      });
      // console.log(res);
      if (res.data.status === 0) {
        this.courseList = res.data.message;
      }
    },
    onFocus() {
      this.isShow = true;
    },
  },
  components: {
    courseList,
  },
};
</script>
<style lang='less' scoped>
/* pages/search/search.wxss */

.search-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.search-body {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 32rpx;
  height: 100%;
  background-color: #f8f8f8;
}

.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 600rpx;
}

.empty .title {
  font-size: 14px;
  color: gray;
}
</style>